<template>
  <div class="p-[20px] bg-white">
    <vxe-grid ref="tableRef" v-bind="gridOptions">
      <template #operate="scope">
        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </vxe-grid>
    <el-dialog
      v-model="visible"
      :title="dialogTitle"
      :align-center="true"
      :append-to-body="true"
      width="700px"
      @close="handleCloseModal"
    >
      <el-form :model="formData" ref="formRef">
        <el-form-item label="分类排序" prop="displayOrder">
          <el-input v-model="formData.displayOrder" />
          <span class="form-helper">序号小的显示在前面！</span>
        </el-form-item>
        <el-form-item
          label="分类名称"
          name="name"
          :rules="[
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ]"
        >
          <el-input v-model="formData.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseModal">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import StoreAPI, { StoreCategoryForm } from "@/api/store";
import { reactive } from "vue";
import { VxeGridProps } from "vxe-table";

interface RowVO {
  [key: string]: any;
}

const visible = ref(false);
const dialogTitle = ref("");
const formData = reactive<StoreCategoryForm>({
  name: "",
  displayOrder: "",
});

const handleCloseModal = () => {
  visible.value = false;
};

const handleSubmit = () => {
  const { id, ...rest } = formData;
  if (id) {
    StoreAPI.updateCategory(id, rest).then(() => {
      ElMessage.success("修改成功");
      handleCloseModal();
      reloadTable();
    });
  } else {
    StoreAPI.addCategory(rest).then(() => {
      ElMessage.success("添加成功");
      handleCloseModal();
      reloadTable();
    });
  }
};

const handleEdit = (row: RowVO) => {
  formData.name = row.name;
  formData.displayOrder = row.displayOrder;
  formData.id = row.id;
  dialogTitle.value = "编辑分类";
  visible.value = true;
};

const handleDelete = (row: RowVO) => {
  StoreAPI.deleteCategory(row.id).then(() => {
    ElMessage.success("删除成功");
    reloadTable();
  });
};

const tableRef = ref();

const reloadTable = () => {
  tableRef.value.commitProxy("query");
};

const gridOptions = reactive<VxeGridProps<RowVO>>({
  showOverflow: true,
  border: true,
  height: 548,
  rowConfig: {
    keyField: "id",
  },
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
  },
  toolbarConfig: {
    custom: true,
  },
  layouts: ["Top", "Form", "Table", "Bottom", "Pager"],
  formConfig: {
    // data: {
    //   createdAt: "",
    //   email: "",
    //   nickname: "",
    // },
    items: [
      {
        field: "name",
        title: "",
        // span: 6,
        itemRender: {
          name: "ElInput",
          props: {
            placeholder: "请输入分类名称",
          },
        },
      },
      // 搜索按钮
      {
        itemRender: {
          name: "VxeButtonGroup",
          events: {
            click(cellParams, params) {
              if (params.name === "add") {
                formData.name = "";
                formData.displayOrder = "";
                delete formData.id;
                dialogTitle.value = "添加分类";
                visible.value = true;
              }
            },
          },
          options: [
            { type: "submit", content: "搜索", status: "primary" },
            { name: "add", content: "添加分类" },
          ],
        },
      },
    ],
  },
  proxyConfig: {
    form: true,
    // 对应响应结果 { result: [], page: { total: 100 } }
    ajax: {
      // 接收 Promise 对象
      query: ({ page, form }) => {
        return StoreAPI.getCategoryList({
          ...form,
          pageNum: page.currentPage,
          size: page.pageSize,
        });
      },
    },
  },
  columns: [
    { type: "seq", width: 70, fixed: "left" },
    { field: "id", title: "分类ID", minWidth: 100 },
    { field: "displayOrder", title: "排序", minWidth: 100 },
    { field: "name", title: "分类名称", minWidth: 100 },
    { field: "storeCount", title: "商家数量", minWidth: 100 },
    // 操作列
    {
      title: "操作",
      field: "operate",
      fixed: "right",
      slots: { default: "operate" },
      minWidth: 300,
    },
  ],
});
</script>
